<template>
  <a-card
    :loading="loading"
    :style="{ height: '100%' }"
    :bodyStyle="{ padding: 0 }"
  >
    <!-- <template slot="title"> Card title </template> -->
    <a-row
      type="flex"
      justify="space-between"
      style="padding: 15px 5px 15px 10px"
    >
      <a-col
        :span="12"
        style="text-align: left; display: flex; align-items: center"
      >
        <a-button type="primary" @click.stop="addStart"> 添加 </a-button>
        <Drawer
          ref="Drawer"
          :prouter="prouter"
          @on-success="onSuccess"
          @on-load="drawerSuccess"
          :model="drawerShow"
          @on-close="drawerShow = false"
        />
      </a-col>
      <a-col :span="12" style="text-align: right">
        <a-form-model
          layout="inline"
          :model="formInline"
          @submit="handleSubmit"
          @submit.native.prevent
        >
          <a-form-model-item>
            <a-input v-model="formInline.title"> </a-input>
          </a-form-model-item>
          <a-form-model-item>
            <a-button html-type="submit"> 搜索 </a-button>
          </a-form-model-item>
        </a-form-model>
      </a-col>
    </a-row>

    <a-table
      :columns="columns"
      :data-source="data"
      row-key="id"
      :pagination="false"
      bordered
    >
      <template slot="keepAlive" slot-scope="text">
        <span>
          {{ text == false ? "否" : "是" }}
        </span>
      </template>
       <template slot="hidden" slot-scope="text">
        <span>
          {{ text == false ? "否" : "是" }}
        </span>
      </template>
      
      <span slot="action" slot-scope="text, record">
        <a-button
          type="primary"
          @click="() => handle(text, record, 1)"
          size="small"
        >
          更新
        </a-button>
        <a-button
          type="danger"
          @click="() => handle(text, record)"
          size="small"
          style="margin-left: 10px"
        >
          删除
        </a-button>
      </span>
    </a-table>
  </a-card>
</template>
<script>
import { getRouterlist } from "@/api";
import Drawer from "./drawer";
export default {
  components: { Drawer },
  data() {
    let columns = [
      {
        title: "id",
        dataIndex: "id",
        key: "id",
        width: 80,
      },
      {
        title: "路由名称",
        dataIndex: "title",
        key: "title",
      },
      {
        title: "路径",
        dataIndex: "path",
        key: "path",
      },
      {
        title: "重定向",
        key: "redirect",
        dataIndex: "redirect",
      },
      {
        title: "是否缓存",
        key: "keepAlive",
        dataIndex: "keepAlive",
        scopedSlots: { customRender: "keepAlive" },
      },
       {
        title: "隐藏路由",
        key: "hidden",
        dataIndex: "hidden",
        scopedSlots: { customRender: "hidden" },
      },
      {
        title: "跳转方式",
        key: "target",
        dataIndex: "target",
      },
      {
        title: "图表",
        key: "icon",
        dataIndex: "icon",
      },
      {
        title: "操作",
        key: "action",
        dataIndex: "id",

        width: 200,
        scopedSlots: { customRender: "action" },
      },
    ];
    columns = columns.map((val) => {
      val.align = "center";
      return val;
    });
    const data = [];
    return {
      loading: false,
      data,
      columns,
      drawerShow: false,
      prouter: [],
      formInline: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.current = 1;
      this.total = 1;
      this.getTableData();
    });
  },
  methods: {
    addStart() {
      this.drawerShow = true;
      this.getprouter();
      setTimeout(() => {
        this.$refs.Drawer.setFieldsValue({});
      }, 200);
    },
    getprouter() {
      var data = {
        current: this.current,
        pid: 0,
      };
      var promise1 = getRouterlist(data);
      promise1
        .then((res) => {
          this.prouter = res.data.list;
          this.$refs.Drawer.prouter = this.prouter;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    handleSubmit() {},
    drawerSuccess() {
      this.drawerState = true;
    },
    onSuccess() {
      this.getTableData();
      this.drawerShow =false
    },
    getTableData() {
      var data = {
        current: this.current,
      };
      let promise = getRouterlist(data);
      promise
        .then((res) => {
          this.data = res.data.list;
          this.total = res.data.total;
        })
        .catch((error) => {
          console.error(error);
        });
    },
    handle(id, obj, n) {
      if (n == 1) {
        this.drawerShow = true;
        this.getprouter();
        obj.keepAlive = obj.keepAlive ? 1 : 0;
        setTimeout(() => {
          this.$refs.Drawer.setFieldsValue(obj);
        }, 200);
      }
    },
  },
};
</script>